<template>
  <div>
    <el-menu default-active="" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-submenu v-for="item in menus" :index="item.funcId.toString()" :key="item.funcId" class="first_menu">
        <template slot="title">
          <i :class="item.icon"></i><span>{{ item.name }}</span>
        </template>
        <router-link v-for="menu in item.children" :key="menu.funcId" :to="menu.path">
          <el-menu-item :class="menu.icon" :index="menu.funcId.toString()" style="text-align: center">{{ menu.name }}</el-menu-item>
        </router-link>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import router from "../router/index";
export default {
  props: ["menus"],
  name: "Menu",
  mounted() {
    let routes = [];
    this.menus.map((item) => {
      if (item.path) routes.push({ path: item.path, component: (resolve) => require([`../views/${item.component}.vue`], resolve) });
      if (item.children)
        item.children.map((menu) => {
          routes.push({ path: menu.path, component: (resolve) => require([`@/views/${menu.component}.vue`], resolve) });
        });
    });
    router.addRoutes(routes);
  },
};
</script>
<style scoped>
.first_menu {
  text-align: left;
  font-size: 15px;
}
.el-menu-vertical-demo {
  width: 200px;
}
</style>